<template>
  <!-- <el-card class="box-card card-chart h-100 d-flex flex-column" :body-style="{flex: 1, dispaly: 'flex'}"> -->
  <el-card class="box-card h-100" :body-style="{height: bodyHeight + 'px'}">  
    <div slot="header" class="clearfix">
      <span>通知公告</span>
      <!-- v-show="datas.length > 0" -->
      <el-button  style="float: right; padding: 3px 0" type="text" @click="$router.push({name: 'noticelist'})">更多</el-button>
    </div>
    <div class="wd-card-body" style="flex: 1; overflow: auto;">
      <ul class="list-group list-group-flush">
        <li v-for="item in datas" :key="item.id" class="list-group-item d-flex justify-content-between align-items-center">
          {{item.sendNote ? item.sendNote.title : item.title}}
          <span class="text-muted" style="font-size: 14px;">{{$formatDateTime(item.sendNote ? item.sendNote.sendTime : item.sendTime)}}</span>
        </li>
      </ul>
      <h3 class="text-center mt-5 text-muted" v-if="datas.length === 0">暂无通知公告</h3>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'noticerecord',
  title: '通知公告',
  data() {
    return {
      datas: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData () {
      this.$get('survey/notice/getNotice', {currentPage: 1, pageSize: 10}).then(res => {
        this.datas = [...res.data.data]
      })
    }
  },
  computed: {
    bodyHeight () {
      return (document.body.clientHeight - 60 -24)/2 - 65
    }
  }
}
</script>